<template>
  <canvas ref="canvas" class="neon-canvas"></canvas>
</template>

<script setup>
// import { Inspector } from '@babylonjs/inspector';
import { ref, onMounted } from 'vue';
import {
  Engine,
  Scene,
  ArcRotateCamera,
  HemisphericLight,
  PointLight,
  MeshBuilder,
  StandardMaterial,
  Color3,
  Vector3,
  Texture,
  HighlightLayer,
} from '@babylonjs/core';

const canvas = ref(null);

onMounted(() => {

  // 初始化 Babylon.js 引擎
  const engine = new Engine(canvas.value, true);
  const scene = new Scene(engine);


  // 相机
  const camera = new ArcRotateCamera(
      "camera",
      -Math.PI / 2,
      Math.PI / 3,
      15,
      Vector3.Zero(),
      scene
  );
  camera.attachControl(canvas.value, true);


  const neonColors = [
    new Color3(1, 0, 0), // 红
    new Color3(0, 1, 0), // 绿
    new Color3(0, 0, 1), // 蓝
    new Color3(1, 0, 1), // 紫
  ];

  // 创建霓虹灯物体
  const createNeonObject = (shape, position, color) => {
    const mesh = MeshBuilder[shape]({ size: 2 }, scene);
    mesh.position = position;


    // 霓虹材质
    const neonMat = new StandardMaterial("neonMat", scene);
    neonMat.emissiveColor = color; //发光颜色
    neonMat.diffuseColor = Color3.Black();//本身颜色 漫反射
    neonMat.specularColor = Color3.Black();// 光线射向之后会有区域高光  可以塑造光滑度
    neonMat.alpha =0.9; // 轻微透明
    mesh.material = neonMat;

    // // 添加发光效果
    const highlightLayer = new HighlightLayer("highlight", scene);
    highlightLayer.addMesh(mesh, color);

    return mesh;
  };

  // 创建不同形状的霓虹灯
  // const neonShapes = ["CreateBox", "CreateSphere", "CreateTorus", "CreateCylinder"];
  const neonShapes = ["CreateSphere", "CreateSphere", "CreateSphere", "CreateSphere"];
  neonShapes.forEach((shape, i) => {
    const position = new Vector3((i - 1.5) * 4, 0, 0);
    createNeonObject(shape, position, neonColors[i % neonColors.length]);
  });



  // 响应式调整
  window.addEventListener("resize", () => engine.resize());
  engine.runRenderLoop(() => scene.render());
});
</script>

<style scoped>
.neon-canvas {
  width: 100%;
  height: 100vh;
  display: block;
  outline: none;
}

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}
</style>